
import React from 'react';
import cass from 'classnames';
import s from './index.module.less';

/**
父盒子要设置的样式属性
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-bottom: 10px;
 */

export default function LabelItem ({ label, value, dom, require, optDom, col = 2, edit, extra }) {
    
    return (
        <div
            className={cass(s.lableItem, {
                [s.lableItemUnEdit]: !edit,
                [s.lableItem1]: col === 1,
                [s.lableItem2]: col === 2
            })}
        >
            <div className={cass(s.lableName, { [s.require]: require })}>
                {label}
                {optDom ? <div className={s.opt}>{optDom}</div> : null}
            </div>

            {edit ? dom : <div className={cass(s.lableText, { [s.hasExtra]: extra })}>{value}</div>}
            {extra ? <div className={s.extra}>{extra}</div> : null}
        </div>
    )
    
}